<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可折叠树形菜单</title>
    <style>
        /* 基本样式 */
        ul {
            list-style-type: none;
            padding-left: 20px;
        }

        li {
            margin: 5px 0;
        }

        /* 箭头样式 */
        .toggle::before {
            content: '►';
            display: inline-block;
            width: 12px;
            cursor: pointer;
        }

        /* 默认隐藏子菜单 */
        .nested {
            display: none;
        }

        /* 展开时显示子菜单 */
        .active > .nested {
            display: block;
        }

        /* 改变箭头方向 */
        .active > .toggle::before {
            content: '▼';
        }

        a {
            text-decoration: none;
            color: #000;
        }

        a:hover {
            color: blue;
        }
    </style>
</head>
<body>

<ul id="menu"></ul>

<script>
    // 多级菜单数据
    const menuItems = [
        {
            label: '首页',
            url: '/home'
        },
        {
            label: '关于我们',
            url: '/about'
        },
        {
            label: '服务',
            children: [
                { label: 'Web开发', url: '/services/web' },
                { label: 'UI设计', url: '/services/ui' },
                {
                    label: '后端开发',
                    children: [
                        { label: 'Node.js', url: '/services/backend/node' },
                        { label: 'Java', url: '/services/backend/java' }
                    ]
                }
            ]
        },
        {
            label: '联系我们',
            url: '/contact'
        }
    ];

    function createMenuItem(menuItem, parentElement) {
        const liElement = document.createElement('li');
        if (menuItem.children && menuItem.children.length) {
            const toggleSpan = document.createElement('span');
            toggleSpan.className = 'toggle';
            toggleSpan.textContent = menuItem.label;
            liElement.appendChild(toggleSpan);

            const nestedUl = document.createElement('ul');
            nestedUl.className = 'nested';

            menuItem.children.forEach(child => createMenuItem(child, nestedUl));
            liElement.appendChild(nestedUl);
        } else {
            let aElement = document.createElement("a");
            aElement.href = menuItem.url;
            aElement.textContent = menuItem.label;
            liElement.appendChild(aElement);
        }
        parentElement.appendChild(liElement);
    }

    function createMenu() {
        const elementById = document.getElementById("menu");
        menuItems.forEach(item => createMenuItem(item, elementById));
    }

    document.addEventListener("DOMContentLoaded", function () {
        createMenu();

        // 添加点击事件监听器以实现展开/折叠功能
        document.querySelectorAll('.toggle').forEach(toggle => {
            toggle.addEventListener('click', function (event) {
                event.preventDefault();
                this.parentElement.classList.toggle('active');
            });
        });
    });
</script>

</body>
</html>